<template>
    <div class="echarts" ref="echartsBar" :style="{ minHeight: '100px' }">
    </div>
</template>
<script>
import { onResizeChang, markLineF } from '../js/common';
let itemStyleColor = ['#19859E', '#29DDCF', '#0777C1']
export default {
    name: 'bar',
    props: {
        // 类型
        type: {
            type: String,
            default: () => ''
        },
        /** 包含
         *  markLine：{
         *  label:'',// 名称
         *  value:'',// 固定值
         * }
         * 
        */
        // 一些配置项
        setting: {
            type: Object,
            default: () => { }
        },
        // 数据
        data: {
            type: [Object, Array],
            default: () => [],
        },
    },
    data() {
        return {
            timesName: null
        }
    },
    created() {
        // 监听屏幕改变的话就调用
        onResizeChang('start', this.onResizeChange)
    },
    methods: {
        echartInit() {
            var myChart = this.$echarts.init(this.$refs.echartsBar);
            let type = this.type;
            var option = {
                // 图例位置
                legend: {},
                tooltip: {
                    formatter: function (params) {
                        var color = params.color.colorStops[0].color;
                        var res = `<div "><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span> ${params.name}<span style="color:#FB7224;margin-left:6px;">${params.value}</span></div>`;
                        return res;
                    }
                },
                // 图像大小
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '5%',
                    containLabel: true
                },
                textStyle: {
                    color: "#ffffff"
                },
                xAxis: {
                    axisLabel: {
                        color: '#ffffff',
                        fontSize: '8'
                    },
                },
                yAxis: {
                    axisLabel: {
                        color: '#C5C0BF',
                        fontSize: '8'
                    },
                },
                series: [{
                    name: '',
                    type: 'bar',
                    // 图形颜色
                    itemStyle: {
                        barBorderRadius: [50, 50, 50, 50],
                        color: {
                            type: 'linear',
                            x: 0, //右
                            y: 0, //下
                            x2: 0, //左
                            y2: 1, //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#EDE4D3',
                                    // color: '#FB7224' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#C3AB81',
                                    // color: '#165DFF00' // 100% 处的颜色
                                }
                            ]
                        }
                    },
                    barMaxWidth: 8,
                    data: [],
                    // 警示线
                    markLine: {
                        data: [
                        ],
                        lineStyle: {
                            color: '#FCC31F',
                            type: 'dotted', // 设置为虚线
                            // 鼠标悬停样式
                            emphasis: {
                                type: 'dotted' // 鼠标悬浮时线变为实线
                            }
                        },
                        label: {
                            show: true,
                            color: '#FCC31F',
                            formatter: (a) => {
                                return a.name;
                            },
                            position: 'insideStartBottom',
                        },
                        // 不要起始点样式
                        symbol: ['none', 'none'],
                    }
                }]
            };
            // 对齐线换为虚线
            let splitLine = {
                lineStyle: {
                    type: 'dashed',
                    color: '#FFFFFF00'
                },
                show: true,
            }
            if (type == 'bar') {
                // 普通柱形图
                option['yAxis'] = {
                    ...option['yAxis'],
                    type: 'value',
                    splitLine: splitLine,
                }

                option['xAxis'] = {
                    ...option['xAxis'],
                    data: this.getSplitData.label.length < 15 ? this.getSplitData.label.concat(['', '', '', '',]) : this.getSplitData.label,
                }
                let dataList = this.getSplitData.value;
                if (Array.isArray(this.getSplitData.label) && this.getSplitData.label.includes('历史最高')) {
                    let i = this.getSplitData.label.indexOf('历史最高');
                    dataList = dataList.map((val, ind) => {
                        if (ind == i) {
                            let obj = {
                                value: val,
                                itemStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0, //右
                                        y: 0, //下
                                        x2: 0, //左
                                        y2: 1, //上
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: '#F3B825',
                                            },
                                            {
                                                offset: 1,
                                                color: '#FB7224',
                                            }
                                        ]
                                    }
                                }
                            }
                            return obj
                        } else {
                            return val;
                        }
                    })
                }
                option['series'][0]['data'] = dataList;
            }
            // 判断有没有辅助线
            if (this.setting && Array.isArray(this.setting.markLine) && this.setting.markLine.length > 0) {
                let markLineArr = markLineF(this.setting.markLine);
                option.series[0].markLine.data = markLineArr;
            }
            myChart.setOption(option);
        },
        // 重新计算
        onResizeChange() {
            var myChart = this.$echarts.init(this.$refs.echartsBar);
            myChart.resize();
        },
        // 对堆叠数据的处理
        converStackData(val) {
            let arr = [];
            let obj = {};
            if (Array.isArray(val) && val.length > 0) {
                val.filter((v, i) => {
                    if (i === 0) {
                        obj = {
                            name: v.type,
                            type: 'bar',
                            stack: v.type,
                            data: [v.value],
                        }
                    } else if (obj.name === v.type) {
                        if (i === val.length - 1) {
                            obj.data.push(v.value);
                            arr.push(obj);
                            obj = {};
                        } else {
                            obj.data.push(v.value);
                        }
                    } else if (obj.name != v.type) {
                        arr.push(obj);
                        obj = {
                            name: v.type,
                            type: 'bar',
                            stack: arr[arr.length - 1].stack,
                            data: [v.value],
                        }
                    }
                })
            }
            arr = arr.map((vals, index) => {
                return {
                    ...vals,
                    itemStyle: {
                        ...vals.itemStyle,
                        color: itemStyleColor[index % itemStyleColor.length]
                    }
                }
            })
            return arr;
        },
    },
    mounted() {
        // 解决页面不聚焦的时候柱形图丢失问题
        this.echartInit();
        this.timesName = setInterval(() => {
            this.echartInit();
        }, 2000)
    },
    watch: {
        data(newVal, oldVal) {
            // 当 parentData 变化时，这个函数会被调用
            this.echartInit();
        }
    },
    computed: {
        // data里面包含 label value
        getSplitData() {
            let arr = {
                label: [],
                value: [],
            };
            this.data.filter((val, index) => {
                arr['label'].push(val.label);
                arr['value'].push(val.value);
            })
            return arr
        },
    },
    // 销毁
    beforeDestroy() {
        onResizeChang('end', this.onResizeChange)
        clearInterval(this.timesName);
        this.timesName = null;
    }
}
</script>
<style lang="less" scoped>
.echarts {
    width: 100%;
    height: 100%;
}
</style>